import React, { useState } from 'react';
import '../pagessass/Login.scss';
import { Form, Input } from 'antd-mobile';
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { loginSuccess } from '../store/authSlice';
import api from '../axios/index.js';
import AnimatedTransition from '../AnimatedTransition';

const Login = () => {
    const dispatch = useDispatch();
    const [visible, setVisible] = useState(false);
    // 声明状态变量存储用户名和密码
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [identifying, setIdentifying] = useState('');
    const navigate = useNavigate();

    // 处理登录逻辑的函数
    const handleLogin = () => {
        // 这里有问题，没有本地存储和持久化存储。
        if (!username || !password || !identifying || username === undefined || password === undefined || identifying === undefined) {
            alert('请输入完整信息');
            return;
        } else {
            try {
                api.post('/denglu', {
                    username,
                    password
                }).then(res => {
                    // console.log('登录响应', res);
                    if (res.data.code === 200) {
                        // console.log('accessToken: ', res.data.accessToken);
                        // console.log('refreshToken: ', res.data.refreshToken);
                        dispatch(loginSuccess({
                            username: res.data.username,
                            password: res.data.password,
                            role: res.data.role,
                            accessToken: res.data.accessToken
                        }));
                        localStorage.setItem('accessToken', res.data.accessToken);
                        localStorage.setItem('refreshToken', res.data.refreshToken);
                        navigate('/tablist/home');
                        alert('登录成功');
                    } else {
                        alert('登录失败,用户名或密码错误');
                    }
                })
            } catch {
                alert('登录失败');
            }
        }

    };

    // 注册跳转函数
    const handleRegister = () => {
        navigate('/layout');
    };

    return (
        <AnimatedTransition>
            <div className="login-page">
                <div className="login-box">
                    <h2 className="login-title">登录</h2>
                    <Form layout='horizontal'>
                        <Form.Item label='手机号' name='username'>
                            {/* 绑定 onChange 事件更新状态 */}
                            <Input
                                placeholder='请输入手机号'
                                clearable
                                onChange={(e) => setUsername(e)}
                            />
                        </Form.Item>
                        <Form.Item
                            label='密码'
                            name='password'
                            extra={
                                <div className="eye">
                                    {!visible ? (
                                        <EyeInvisibleOutline onClick={() => setVisible(true)} />
                                    ) : (
                                        <EyeOutline onClick={() => setVisible(false)} />
                                    )}
                                </div>
                            }
                        >
                            {/* 绑定 onChange 事件更新密码状态 */}
                            <Input
                                placeholder='请输入密码'
                                clearable
                                type={visible ? 'text' : 'password'}
                                onChange={(e) => (setPassword(e))}
                            />
                        </Form.Item>
                        <Form.Item label='验证码' extra={<a>获取验证码</a>}>
                            <Input placeholder='请输入' value={identifying} onChange={(e) => setIdentifying(e)} />
                        </Form.Item>
                        {/* 点击登录按钮触发登录逻辑 */}
                        <button className="login-btn" onClick={handleLogin}>登录</button>
                    </Form>
                    {/* 注册跳转按钮 */}
                    <p className='register' onClick={handleRegister}>注册信息</p>
                </div>
            </div>
        </AnimatedTransition>
    );
};

export default Login;